<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async异步编程</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.11.0/axios.min.js"></script>
</head>
<!--布局方向flex-direction 
    row	默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列
    row-reverse	主轴为水平方向（水平布局），起点在右端，从右向左排列
    column	主轴为垂直方向（垂直布局），起点在上沿，从上往下排列
    column-reverse	主轴为垂直方向（垂直布局），起点在下沿，从下往上排列

    环绕效果flex-wrap
    nowrap	默认值，表示不换行,盒子装不下，当窗体的宽度被拉到最小时，几个div不会换行，而是缩小自己的宽度适应窗口的宽度。
    wrap	换行
    wrap-reverse	换行，第一行在下方

    水平对齐方式justify-content
    flex-start	默认值，左对齐
    flex-end	右对齐
    center	居中
    space-between	两端对齐，项目之间的间隔相等
    space-around	项目两侧的间距相同，项目之间的间距比两侧的间距大一倍

    交叉轴对齐方式align-items
    flex-start	交叉轴的起点对齐
    flex-end	交叉轴的终点对齐
    center	交叉轴的中点对齐
    baseline:	项目的第一行文字的基线对齐。
    stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。

    box-sizing 属性可以被用来调整这些表现：
    content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
-->
<body>
     <div class="box">hello
        <!-- <div class="b1">1</div>
        <div class="b2">2</div>
        <div class="b3">3</div> -->
         <!-- <div class="b1">1</div>
        <div class="b2">2</div>
        <div class="b3">3</div>
         <div class="b1">1</div>
        <div class="b2">2</div>
        <div class="b3">3</div> -->
     </div>

<script>
  
</script>
</body>
<style>
.box{
    border:1px solid red;
    width:800px;
    height:500px;
    padding:20px;
    box-sizing: border-box;
}
/* .b1{
    background-color: aqua;
    width:100px;
    height:50px;
}
.b2{
    background-color: blue;
    width:100px;
    height:100px;
}
.b3{
    background-color: chocolate;
    width:100px;
    height:100px;
} */
</style>
</html>